<script setup lang="ts">


import ImageToImage from "~/components/ai/ImageToImage.vue";
import ImagePreview from "~/components/ai/LazyImagePreview.vue";
import ImageUpload from "~/components/ai/ImageUpload.vue";
import DropSelect from "~/components/common/DropSelect.vue";
import LabelBase from "~/components/ai/LabelBase.vue";
import SliderBase from "~/components/ai/SliderBase.vue";
import ModelSelect from "~/components/ai/ModelSelect.vue";
import Prompt from "~/components/ai/PromptBase.vue";
import Positive from "~/components/ai/Positive.vue";
import Negative from "~/components/ai/Negative.vue";
import Denoise from "~/components/ai/Denoise.vue";
import type {Image} from "~/composables/drawhooks";
import SegmentPartsChips from "~/components/ai/SegmentPartsChips.vue";

const sdStore = useStableDiffusionStore()
const {isGernateDisable, aimodelParams: drawParams} = storeToRefs(sdStore)
const uploadfile = ref()


onMounted(async () => {
// socketInit()

  //如果当前store中存储的大模型名称不存在则重置为第一个
  await ComfyUI.Initalize()
  if (drawParams.value.ckpt_name && !ComfyUI.ckpt_names.includes(drawParams.value.ckpt_name)) {
    drawParams.value.ckpt_name = ComfyUI.ckpt_names[0]
  }
});
definePageMeta({
  //布局
  layout: 'landing-layout',
  validate: async (route: any) => {
    return true
  }
})

//非空验证
const emptyValidation = ref(false)

const imageGenerate = async () => {
  isGernateDisable.value = true
  // console.log(uploadfile.value)
  await ComfyUI.Initalize()
  const image_model = await ComfyUI.uploadImage(uploadfile.value[0].originFileObj)
  if (image_model) {
    //总生成步数计算进度百分比
    sdStore.totalSteps = 86
    sdStore.excutingApi = "AI模特"
    emptyValidation.value = true
    const image_mask = await ComfyUI.segmentAnything({
      ...drawParams.value,
      image_path_origin: image_model,
      segmentpart: 'dress',
    })

    if (!image_mask) {
      isGernateDisable.value = false
      return
    }
    sdStore.outputImage_Mask = {url: image_mask} as Image
    // drawParams.value.image_path_mask = image_mask
    const output = await ComfyUI.aimodel({
      ...drawParams.value,
      image_path_origin: image_model,
      image_path_mask: image_mask,
    })
    console.log('AI模特绘画参数', {
      ...drawParams.value,
      image_path_origin: image_model,
      image_path_mask: image_mask,
    })
    if (output) {
      sdStore.addImage(output)
    }
  }
  isGernateDisable.value = false
}


</script>

<template>
  <v-container class="h-full">
    <v-row class="h-full">
      <v-col cols="12" md="6">
        <v-card>
          <!--    <context-holder />-->

          <v-card-text>
            <!-- 图片上传组件 -->
            <image-upload v-model:uploadfile="uploadfile"/>

            <!-- 服装参数:识别区域 -->
            <v-label class="font-weight-medium my-3">
              识别区域（选中的部分将会被保留）
            </v-label>
            <v-row justify="space-around">
              <v-col cols="12">
                <v-sheet elevation="10" class="py-4 px-1">
                  <segment-parts-chips v-model="drawParams.segmentpart"/>
                  <v-img v-show="sdStore.outputImage_Mask" max-height="200"
                         :src="sdStore.outputImage_Mask?.url"></v-img>
                </v-sheet>
              </v-col>
            </v-row>

            <!--positive-->
            <positive v-model="drawParams.positive"/>
            <!-- Negative Prompt  -->
            <negative v-model="drawParams.negative"/>

            <!--      选择大模型-->
            <model-select v-model="drawParams.ckpt_name"/>
            <!-- 重绘幅度   -->
            <denoise v-model="drawParams.denoise"/>
            <!-- 生成按钮 -->
            <v-btn class="mt-2" size="x-large" color="primary" :loading="sdStore.isGernateDisable"
                   :disabled="sdStore.isGernateDisable"
                   block @click="imageGenerate">开始生成
              <template v-slot:loader>
                {{ sdStore.btnStatus }}
                <v-progress-circular
                    color="primary"
                    indeterminate
                    :model-value="sdStore.getProcess"></v-progress-circular>
              </template>
            </v-btn>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6">
        <!-- 进度条
        <v-progress-linear :model-value="sdStore.progress" bg-color="primary-lighten-3"
          color="primary-lighten-1"></v-progress-linear> -->
        <ImagePreview/>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped lang="scss"></style>
